<script lang="ts" setup>
interface Option {
  text: string
  value: string
}
const props = defineProps({
  options: {
    type: Array<Option>,
  },
  title: {
    type: String,
  },
  readonly: {
    type: Boolean,
    default: false,
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  inputAlign : {
    type: String,
    default: 'left',
  },
  isSearch: {
    type: Boolean,
    default: false,
  },
})

const model = defineModel({ type: String })

const innerValue = ref([])
const innerText = ref('')
const showPicker = ref(false)
function onConfirm({ selectedValue, selectedOptions }: { selectedValue: (string | number)[] }) {
  showPicker.value = false
  // const item = props.options.find((x: Option) => x.value === selectedValue[0])
  const item = props.options.find((x: Option) => x.value === selectedOptions[0].value)
  if (item) {
    innerText.value = item.text
  }
  // model.value = selectedValue[0]
  model.value = selectedOptions[0].value
}
function init() {
  const item = props.options.find((x: Option) => x.value === model.value)
  if (item) {
    nextTick(() => {
      innerText.value = item.text
    })
  }
}
const emits = defineEmits(['clickInput'])

function clickInput () {
  if (!props.disabled) {
    showPicker.value = true
    emits('clickInput')
  }
}

onMounted(() => {
  if (props.options) {
    optionsList.value = props.options
    init()
  }
})

watch(() => model.value, () => {
  if (model.value === '') {
    innerText.value = ''
  } else {
    if (props.options) {
      optionsList.value = props.options
      init()
    }
  }
})
watch(() => props.options, () => {
  optionsList.value = props.options
  if (model.value && innerText.value === '') {
    init()
  }
})

let optionsList = ref([])
const searchKey = ref('')

watch(() => searchKey.value, (value) => {
  if (value !== '') {
     optionsList.value = props.options.filter(item => item.text.includes(value))
  }else {
    optionsList.value = props.options
  }
})

</script>

<template>
  <template v-if="props.readonly">
    <nut-cell :title="props.title" :desc="innerText" />
  </template>
  <template v-else>
    <nut-input v-model="innerText" class="nut-input-text" :placeholder="`请选择${props.title}`" type="text" readonly
      :disabled="props.disabled" @click="clickInput" :input-align="props.inputAlign" placeholder-style="color:#ccc;" />
    <nut-popup v-model:visible="showPicker" position="bottom" safe-area-inset-bottom>
      <div class="nut-input-searck" v-if="isSearch">
        <nut-input v-model="searchKey" class="nut-input-text" :placeholder="`请输入员工信息搜索`" type="text"
          input-align="center" placeholder-style="color:#ccc;" />
      </div>
      <nut-picker v-model="innerValue" :columns="optionsList" :title="props.title" :disabled="props.disabled"
        @confirm="onConfirm" @cancel="showPicker = false" teleport="body" />
    </nut-popup>
  </template>
</template>

<style lang="sass" scoped>
.nut-input-searck
  height: 100rpx
  width: 100%
  display: flex
  align-items: center
  justify-content: center
</style>